<template>
	<div>
		<el-row :gutter="24" v-if="tableData.length > 0">
			<el-col :span="6" style="padding-right: 0px">
				<el-table :data="tableData" border>
					<el-table-column
						show-overflow-tooltip
						v-for="(item, index) in goodsSpuSpecs"
						:key="index"
						:prop="item.id"
						:label="item.specsName ? item.specsName : '未选择'"
					>
						<template #default="scope">
							<el-input disabled v-model="scope.row.goodsSkuSpecsValues[index].specsValueName" />
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="18" style="padding-left: 0px">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="salesPrice" label="售价">
						<template #default="scope">
							<el-input-number v-model="scope.row.salesPrice" :min="0" :precision="2" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="originalPrice" label="原价">
						<template #default="scope">
							<el-input-number v-model="scope.row.originalPrice" :min="0" :precision="2" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="costPrice" label="成本价">
						<template #default="scope">
							<el-input-number v-model="scope.row.costPrice" :min="0.0" :precision="2" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="stock" label="库存">
						<template #default="scope">
							<el-input-number v-model="scope.row.stock" :min="0" :precision="0" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="stock" label="一级分销比例">
						<template #default="scope">
							<el-input-number v-model="scope.row.firstRate" :min="0" :precision="0" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="stock" label="二级分销比例">
						<template #default="scope">
							<el-input-number v-model="scope.row.secondRate" :min="0" :precision="0" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="enable" label="是否启用" width="90px">
						<template #default="scope">
							<el-switch v-model="scope.row.enable" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否"></el-switch>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-popover placement="right" :visible="batchPopover" :width="350" trigger="click">
			<div class="popover-input">
				<el-form ref="formRef" :model="form" label-width="120px">
					<el-form-item label="售价">
						<el-input-number v-model="form.salesPrice" :min="0" :precision="2" :controls="false" placeholder="请输入商品售价" />
					</el-form-item>
					<el-form-item label="原价">
						<el-input-number v-model="form.originalPrice" :min="0" :precision="2" :controls="false" placeholder="请输入商品原价" />
					</el-form-item>
					<el-form-item label="成本价">
						<el-input-number v-model="form.costPrice" :min="0" :precision="2" :controls="false" placeholder="请输入商品成本价" />
					</el-form-item>
					<el-form-item label="库存">
						<el-input-number v-model="form.stock" :min="0" :precision="0" :controls="false" placeholder="请输入商品库存" />
					</el-form-item>
					<el-form-item label="一级分销比例">
						<el-input-number v-model="form.firstRate" :min="0" :precision="0" :controls="false" placeholder="请输入一级分销比例" />
					</el-form-item>
					<el-form-item label="二级分销比例">
						<el-input-number v-model="form.secondRate" :min="0" :precision="0" :controls="false" placeholder="请输入二级分销比例" />
					</el-form-item>
					<el-form-item label-width="120px">
						<el-button @click="popoverClose">关闭</el-button>
						<el-button @click="batchAdd" type="primary">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
			<template #reference>
				<el-button link @click="batchPopover = true" v-if="tableData.length > 0" type="primary">批量设置</el-button>
			</template>
		</el-popover>
	</div>
</template>
<script lang="ts">
import { arrEquals, descartes } from '/@/utils/util';
import { defineComponent, reactive, toRefs, PropType, watch } from 'vue';
interface dataType {
	tableData: Array<any>;
	skusList: Array<any>;
	form: any;
	batchPopover: boolean;
}
export default defineComponent({
	props: {
		skusData: {
			type: Array,
			default: [],
		},
		goodsSpuSpecs: {
			type: Array as PropType<any[]>,
			default: [],
		},
	},
	setup(props, ctx) {
		const data = reactive<dataType>({
			tableData: [],
			skusList: [],
			form: {
				salesPrice: 0,
				originalPrice: 0,
				costPrice: 0,
				stock: 0,
				firstRate: 0,
				secondRate: 0,
			},
			batchPopover: false,
		});
		watch(
			() => props.goodsSpuSpecs,
			(newVal, oldVal) => {
				let arrayc: any = [];
				props.goodsSpuSpecs.forEach(function (item: any) {
					if (item.goodsSkuSpecsValues && item.goodsSkuSpecsValues.length > 0) {
						arrayc.push(item.goodsSkuSpecsValues);
					}
				});
				let skuList = descartes(arrayc);
				skuList = skuList.map((item: any) => ({
					goodsSkuSpecsValues: Array.isArray(item) ? item : [item],
					ids: (Array.isArray(item) ? item : [item]).map((ites) => ites.specsValueId),
					id: undefined,
					salesPrice: 0,
					originalPrice: 0,
					costPrice: 0,
					stock: 0,
					enable: '1',
					firstRate: 0,
					secondRate: 0,
				}));

				let skuList2 = props.skusData.map((item: any) => ({
					...item,
					ids: item.goodsSkuSpecsValues.map((ites: any) => ites.specsValueId),
				}));
				skuList.forEach((item: any) => {
					skuList2.forEach((item2) => {
						if (arrEquals(item.ids, item2.ids)) {
							item.id = item2.id ? item2.id : '';
							item.salesPrice = item2.salesPrice ? item2.salesPrice : 0;
							item.originalPrice = item2.originalPrice ? item2.originalPrice : 0;
							item.costPrice = item2.costPrice ? item2.costPrice : 0;
							item.stock = item2.stock ? item2.stock : 0;
							item.enable = item2.enable ? item2.enable : '1';
							item.firstRate = item2.firstRate ? item2.firstRate : 0;
							item.secondRate = item2.secondRate ? item2.secondRate : 0;
						}
					});
				});
				data.skusList = skuList;
			}
		);
		watch(
			() => data.skusList,
			(newVal, oldVal) => {
				if (!newVal || !newVal.length) {
					return (data.tableData = []);
				} else {
					if (!oldVal || !oldVal.length) {
						return (data.tableData = newVal.map((item: any) => ({
							...item,
							id: item.id ? item.id : '',
							salesPrice: item.salesPrice ? item.salesPrice : 0,
							originalPrice: item.originalPrice ? item.originalPrice : 0,
							costPrice: item.costPrice ? item.costPrice : 0,
							stock: item.stock ? item.stock : 0,
							enable: item.enable ? item.enable : '1',
							firstRate: item.firstRate ? item.firstRate : 0,
							secondRate: item.secondRate ? item.secondRate : 0,
						})));
					} else {
						if (newVal[0].goodsSkuSpecsValues.length != oldVal[0].goodsSkuSpecsValues.length) {
							return (data.tableData = newVal.map((item: any) => ({
								...item,
								id: undefined,
								salesPrice: 0,
								originalPrice: 0,
								costPrice: 0,
								stock: 0,
								enable: '1',
								firstRate: 0,
								secondRate: 0,
							})));
						}
						if (newVal.length == oldVal.length) {
							return (data.tableData = newVal.map((item: any, index: number) => ({
								...data.tableData[index],
								...item,
							})));
						}
						if (newVal.length > oldVal.length) {
							let arrayData: any = [];
							newVal.forEach((item: any) => {
								const sku = data.tableData.find((item2: any) => JSON.stringify(item2.ids) == JSON.stringify(item.ids));
								if (sku) {
									arrayData.push(sku);
								} else {
									arrayData.push({
										...item,
										id: '',
										salesPrice: 0,
										originalPrice: 0,
										costPrice: 0,
										stock: 0,
										enable: '1',
										firstRate: 0,
										secondRate: 0,
									});
								}
							});
							return (data.tableData = arrayData);
						} else {
							return (data.tableData = newVal);
						}
					}
				}
			},
			{ deep: true, immediate: true }
		);
		watch(
			() => data.tableData,
			(newVal, oldVal) => {
				ctx.emit('getGoodsSkus', newVal);
			},
			{ deep: true }
		);

		const batchAdd = () => {
			data.tableData.forEach((item: any) => {
				if (data.form.salesPrice) {
					item.salesPrice = data.form.salesPrice;
				}
				if (data.form.originalPrice) {
					item.originalPrice = data.form.originalPrice;
				}
				if (data.form.costPrice) {
					item.costPrice = data.form.costPrice;
				}
				if (data.form.stock) {
					item.stock = data.form.stock;
				}
				if (data.form.firstRate) {
					item.firstRate = data.form.firstRate;
				}
				if (data.form.secondRate) {
					item.secondRate = data.form.secondRate;
				}
			});
			popoverClose();
		};
		const popoverClose = () => {
			data.batchPopover = false;
			data.form = { salesPrice: 0, originalPrice: 0, costPrice: 0, stock: 0, firstRate: 0, secondRate: 0 };
		};
		return {
			...toRefs(data),
			batchAdd,
			popoverClose,
		};
	},
});
</script>
